<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>更新商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.8.3.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="../css/webindex.css"/>
    <link rel="stylesheet" type="text/css" href="../css/footer.css"/>
    <link rel="stylesheet" type="text/css" href="../css/top.css"/>
    <script src="../js/menu.js" type="text/javascript" charset="utf-8"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>

<body>
<div class="layui-fluid">
    <form id="modelForm" method="post" class="layui-form" style="margin-left: 30px; margin-top: 10px;">
        <div class="cla_nav">
            <span>更新信息</span>
        </div>
        <ul id="showPoint">

        </ul>
        <!--按钮区-->
        <div style="margin-top: 10px;">
            <input type="button" class="layui-btn" value="保存" id="saveBtn" lay-submit="" lay-filter="saveBtn"/>
            <input type="button" class="layui-btn" value="关闭" id="closeBtn"/>
        </div>
    </form>
</div>

<script type="text/javascript">
    layui.define(['form', 'layer','upload','element'], function () {
        var $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            element = layui.element

        //自定义验证规则
        form.verify({
            limit: [
                /^[\u4E00-\u9FA5A-Za-z0-9_]+$/
                , '输入范围是中文、英文、数字包括下划线'
            ]
        });

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        var pid = getUrlParam("pid");
        $.ajax({
            url: "/product/selectByPid/" + pid,
            type: "GET",
            dataType: "json",
            async: false,
            success: function (returnData) {
                console.info(returnData);
                if (returnData.stateCode == "200") {
                    $("#showPoint").empty();
                    let li =
                        '            <li style="margin-top: 10px;">\n' +
                        '                <label>物品类型: </label>\n' +
                        '                <input name="itemType" id="itemType" class="layui-input" style="width: 190px; display: inline;"\n' +
                        '                       value="#{itemType}" lay-verify="required"/>\n' +
                        '            </li>\n' +
                        '            <li style="margin-top: 10px;">\n' +
                        '                <label>标题：</label>\n' +
                        '                <input name="title" id="title" class="layui-input"\n' +
                        '                       value="#{title}" style="width: 190px; display: inline;" lay-verify="required"/>\n' +
                        '            </li>\n' +
                        '            <li style="margin-top: 10px;">\n' +
                        '                <label>利益点：</label>\n' +
                        '                <input name="sellPoint" id="sellPoint" class="layui-input" style="width: 190px; display: inline;"\n' +
                        '                       value="#{sellPoint}" lay-verify="required"/>\n' +
                        '            </li>\n' +
                        '            <li style="margin-top: 10px;">\n' +
                        '                <label>售价：</label>\n' +
                        '                <input name="price" id="price" class="layui-input"\n' +
                        '                       value="#{price}" style="width: 190px; display: inline;"/>\n' +
                        '            </li>\n' +
                        '            <li style="margin-top: 10px;">\n' +
                        '                <label>数量：</label>\n' +
                        '                <input name="num" id="num" class="layui-input"\n' +
                        '                       value="#{num}" style="width: 190px; display: inline;"/>\n' +
                        '            </li>\n' +
                        '<li style="margin-top: 10px;">\n' +
                        '                <div class="layui-upload">\n' +
                        '                    <button type="button" class="layui-btn" id="test1">上传图片</button>\n' +
                        '                    <div class="layui-upload-list">\n' +
                        '                        <img class="layui-upload-img" id="demo1">\n' +
                        '                        <p id="demoText"></p>\n' +
                        '                    </div>\n' +
                        '                    <div style="width: 95px;">\n' +
                        '                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">\n' +
                        '                            <div class="layui-progress-bar" lay-percent=""></div>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '                <a name="list-progress"> </a>\n' +
                        '                <div style="margin-top: 10px;">\n' +
                        '                </div>\n' +
                        '                <input name="imageLocation" id="imageLocation" value="#{image}" style="display: none;"/>\n' +
                        '                <input name="thumbnail" id="thumbnail" value="#{thumbnail}" style="display: none;"/>\n' +
                        '            </li>'
                    li = li.replace(/#{itemType}/g, returnData.data.itemType);
                    li = li.replace(/#{title}/g, returnData.data.title);
                    li = li.replace(/#{sellPoint}/g, returnData.data.sellPoint);
                    li = li.replace(/#{price}/g, returnData.data.price);
                    li = li.replace(/#{num}/g, returnData.data.num);
                    li = li.replace(/#{image}/g, returnData.data.image);
                    li = li.replace(/#{thumbnail}/g, returnData.data.thumbnail);
                    $("#showPoint").append(li);
                } else {
                    layer.msg(returnData.msg);
                }
            },
            error: function () {
                layer.msg("更新失败！");
            }
        });

        //监听提交 表单验证
        form.on('submit(saveBtn)', function (data) {
            var goodsObj = {};
            goodsObj.id = pid;
            console.log(pid);
            goodsObj.itemType = $("#itemType").val();
            goodsObj.title = $("#title").val();
            goodsObj.sellPoint = $("#sellPoint").val();
            goodsObj.price = $("#price").val();
            goodsObj.num = $("#num").val();
            goodsObj.image = $("#image").val();
            goodsObj.thumbnail = $("#thumbnail").val();

            $.ajax({
                url: "/product/updateByPid",
                type: "POST",
                data: goodsObj,
                dataType: "json",
                success: function (returnData) {
                    console.info(returnData);
                    if (returnData.code === "0") {
                        layer.alert("更新成功！");
                        setTimeout(function () {
                            location.href = 'queryGoods.html';
                        }, 2000);
                    } else {
                        layer.msg(returnData.msg);
                    }
                },
                error: function () {
                    layer.msg("更新失败！");
                }
            });
            return false;
        });

        //关闭按钮
        $("#closeBtn").click(function () {
            location.href = 'queryGoods.html';
        });

        //图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'http://localhost:8080/imgUpload/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg(res.msg);
                }
                //上传成功的一些操作
                $('#imageLocation').val(res.src);
                $('#thumbnail').val(res.src + 'collect.png');
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>


</html>